<template>
  <div>
    <div v-if="loading" class="loading">
      <el-skeleton :rows="5" animated />
    </div>

    <el-alert 
      v-if="error" 
      :title="error" 
      type="error" 
      show-icon 
      :closable="false" 
      class="error-alert" 
    />

    <div v-if="!loading && !error">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StatisticsDisplay',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    error: {
      type: String,
      default: null
    }
  }
};
</script>

<style scoped>
.loading {
  margin: 20px 0;
}

.error-alert {
  margin: 20px 0;
}
</style>
